<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局练习</title>
    <link href="css2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="head">
    <div class="page-head">
        <div class="left"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a> </div>
        <ul class="right">
            <li class="right"><a href="#">课程</a></li>
            <li class="right"><a href="#">职业路径</a></li>
            <li class="right"><a href="#">实战</a></li>
            <li class="right"><a href="#">猿问</a></li>
            <li class="right"><a href="#">手记</a></li>
        </ul>
    </div>
</div>
<div class="body">
    <div class="page-left">
        <h3>课程推荐</h3>
        <div>
            <span class="sign">职业路径</span>
            <span>HTML5与CSS3实现动态网页</span>
        </div>
        <div>
            <span class="sign">职业路径</span>
            <span>零基础入门Android语法与界面</span>
        </div>
        <div>
            <span class="sign">职业路径</span>
            <span>PHP入门开发</span>
        </div>
        <div>
            <span class="sign">职业路径</span>
            <span>JAVA入门开发</span>
        </div>
    </div>
    <div class="page-right">
        <h3>相关课程</h3>
        <div class="row">HTML &nbsp;&nbsp;CSS &nbsp;&nbsp;JavaScript</div>
        <div class="row">HTML &nbsp;&nbsp;CSS &nbsp;&nbsp;JavaScript</div>
        <div class="row">移动端基础 &nbsp;&nbsp;移动端APP开发</div>
    </div>
</div>
<div class="foot">
    <ul>
        <li><a href="#">网站首页</a> </li>
        <li><a href="#">企业合作</a> </li>
        <li><a href="#">人才招聘</a> </li>
        <li><a href="#">联系我们</a> </li>
        <li><a href="#">常见问题</a> </li>
        <li><a href="#">友情链接</a> </li>
    </ul>
</div>
</body>
</html>